import React, { memo } from "react";
import { useHistory, Link } from "react-router-dom";
import sty from "./sty.module.css";
import cs from "classnames";
import { getSizeImage, getCount } from "@/utils/format-utils";

const SongCover = memo((props) => {
  const { info, songList } = props;

  const picUrl =
    (info && (info.picUrl || info.coverImgUrl)) ||
    (songList && songList.coverImgUrl);
  const playCount =
    (info && info.playCount) || (songList && songList.playCount) || 0;
  const name =
    (info && info.name) ||
    (songList && songList.creator && songList.creator.name) ||
    "";
  const nickname =
    (info && info.creator && info.creator.nickname) ||
    (songList && songList.creator && songList.creator.nickname) ||
    "";
  const songlistId = (info && info.id) || songList.id;
  const iconImg =
    info &&
    info.creator &&
    info.creator.avatarDetail &&
    info.creator.avatarDetail.identityIconUrl;
  const history = useHistory();
  const goTosonglistId = () => {
    history.push("/songlist?songlistId=" + songlistId);
  };
  return (
    <li className={sty.item}>
      <div className={sty.cover} onClick={() => goTosonglistId()}>
        <img src={getSizeImage(picUrl, 140)} alt="" />
        <div className={cs(sty.mask, "sprite_cover")}></div>
        <div className={cs(sty.bottomBar, "sprite_cover", "flex4")}>
          <span>
            <i className={cs("sprite_icon", sty.erji)}></i>
            {getCount(playCount)}
          </span>
          <i className={cs("sprite_icon", sty.play)}></i>
        </div>
      </div>
      <div className={cs(sty.title, "txt1")}> {name}</div>
      <div className={cs(sty.source, "txt1")}>
        bg<Link to={`/user/home?id=${songlistId}`}>{nickname} </Link>
        {iconImg ? <img src={iconImg} alt="" className={sty.iconImg} /> : null}
      </div>
    </li>
  );
});
export default SongCover;
